

<template>
  <div >
    <BhTable
        title="角色管理"
        row-key="id"
        v-model:selected-keys="selectedKeys"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :data="dataList as []"
        :columns="columns"
        @refresh="search"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
    >
      <template #top>
        <BhForm  ref="formRef" :columns="queryColumns" :model-value="queryForm"
                 :options="options" @search="search" @reset="reset"></BhForm>

      </template>
      <template #toolbar-left>
        <a-space>
          <a-button
              v-permission="['sys:role:add']"
              type="primary"
              @click="emits('openAdd')"
          >
            <template #icon>
              <icon-plus />
            </template>
            {{ $t('common.create') }}
          </a-button>
          <a-button
              v-permission="['sys:role:delete']"
              type="primary"
              status="danger"
              :disabled="selectedKeys.length === 0"
              @click="deleteSelectRows"
          >
            <template #icon>
              <icon-delete />
            </template>
            {{ $t('common.delete') }}
          </a-button>
        </a-space>
      </template>

      <template #status="{ record }">
        <!-- 有修改权限 -->
        <a-switch
            v-if="hasPermission('sys:role:status')"
            v-model="record.status"
            type="round"
            checked-text="开启"
            unchecked-text="关闭"
            :checked-value="Status.ENABLED"
            :unchecked-value="Status.DISABLED"
            :before-change="(s: number) => updateStatus(record.id, s)"
        />
        <a-badge
            v-else
            :status="record.status == 1 ? 'processing' : 'danger'"
            :text="record.status == 1 ? '开启' : '关闭'"
        />
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
        <!-- 修改 -->
        <a-button
            v-permission="['sys:role:edit']"
            type="text"
            size="mini"
            @click="emits('openUpdate', record)"
        >
          修改
        </a-button>
        <!-- 分配权限 -->
        <a-button
            v-permission="['sys:role:permission']"
            type="text"
            size="mini"
            @click="emits('openGrantRole', record)"
        >
          分配权限
        </a-button>
        <!-- 删除 -->
        <a-button
            v-permission="['sys:role:delete']"
            type="text"
            size="mini"
            status="danger"
            @click="deleteRow(record)"
            :disabled="record.code === AdminRoleCode"
        >
          删除
        </a-button>
      </template>

    </BhTable>
  </div>
</template>
<script setup lang="ts">
import { useTable } from '@/hooks/modules/useTable';
import {type RoleQueryRequest,type RoleQueryResponse , getList,deleteRows,updateRowStatus} from '@/api/system/role';
import type { TableInstanceColumns } from '@/components/BhTable'
import {Message} from "@arco-design/web-vue";
import { isMobile } from '@/utils'
import {AdminRoleCode} from "@/types/const";
import usePermission from '@/hooks/permission';
import { Status } from '../types/const';
import { type Columns, BhForm, type Options } from '@/components/BhForm'

const { hasPermission } = usePermission();


const options: Options = {
  form: { layout: 'inline' },
  grid: { cols: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 2 } },
  fold: { enable: false, index: 1, defaultCollapsed: true },
}
const queryForm = reactive<RoleQueryRequest>({
  name: '',
});
const queryColumns: Columns = reactive([
  {
    label: '角色名称',
    field: 'name',
    type: 'input',
    props: {
      placeholder: '请输入角色名称',
    }
  },
])


const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
  selectedKeys,
  rowSelection
} = useTable((page) => getList({ ...queryForm, ...page }), {
  immediate: true,
});
const columns: TableInstanceColumns[] = [
  { title: '序号', width: 66, dataIndex: 'id', align: 'center'},
  { title: '角色名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
  { title: '角色标识', dataIndex: 'code', ellipsis: true, tooltip: true },
  { title: '状态',dataIndex: 'status',slotName: 'status',align: 'center',width: 120, ellipsis: true,tooltip: true  },
  { title: '排序', dataIndex: 'sort', align: 'center', show: true ,ellipsis: true,tooltip: true,},
  { title: '备注', dataIndex: 'note', ellipsis: true, tooltip: true },
  { title: '创建时间', dataIndex: 'create_time', width: 180},
  { title: '修改时间', dataIndex: 'update_time', width: 180},
  { title: '操作', dataIndex: 'handle', slotName: 'handle',width: 200,align: 'center', fixed: !isMobile() ? 'right' : undefined},
]
const reset = () => {
  queryForm.name = undefined
  search()
}

const deleteSelectRows = async () => {
  if (selectedKeys.value.length <= 0) {
    Message.error('请选择数据');
  }
};
const emits = defineEmits(['openAdd', 'openUpdate', 'openGrantRole']);


// 更新状态
const updateStatus = (id: number, status: number) => {
  return updateRowStatus({
    id,
    status,
  }).then(() => {
    Message.success('操作成功');
  });
};

// 删除数据
const deleteRow = (record: RoleQueryResponse) => {
  return handleDelete(() => deleteRows(record.id), {
    content: `是否确定删除角色「${record.name}(${record.code})」？`,
    showModal: true,
  })
}

// 新增编辑后回调
const restartCallback = () => {
  reset();
};

defineExpose({
  restartCallback,
});
</script>
<style scoped lang="less"></style>
